<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>

<body>
  <div id="app">
    <div class="container">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.brandName}}</td>
            <td>{{item.createTime}}</td>
            <td><a @click.prevent="del(i)" href="#">删除</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, brandName: '宝马', createTime: '2020-04-10' },
          { id: 2, brandName: '奔驰', createTime: '2020-06-10' },
          { id: 3, brandName: '奥迪', createTime: '2020-02-10' },
          { id: 4, brandName: '马自达', createTime: '2020-02-10' }
        ]
      },
      methods: {
        del (index) {
          // 思维：凡是视图的更新，通过数据去驱动。
          // 实现：得到点击的当前行的索引，根据索引移除数组中对应的数据即可。
          this.list.splice(index, 1)
        }
      }
    })
  </script>
</body>

</html>